<template>
  <div>
    <a-form-model
      :model="formData"
      :rules="rules"
      :colon="false"
      ref="validateForm">
      <a-row :gutter="36">
        <!-- 姓名 -->
        <a-col :md="12" :sm="24">
          <a-form-model-item label="姓名" prop="basic.name">
            <a-input v-model="formData.basic.name" readOnly/>
          </a-form-model-item>
        </a-col>
        <!-- 工号 -->
        <a-col :md="12" :sm="24">
          <a-form-model-item label="工号"  prop="basic.account">
            <a-input v-model="formData.basic.account" readOnly/>
          </a-form-model-item>
        </a-col>
        <!-- 联系电话 -->
        <a-col :md="12" :sm="24">
          <a-form-model-item label="联系电话"  prop="basic.phone">
            <a-input addon-before="+86" :maxLength="11" v-model="formData.basic.phone" placeholder="请输入手机号码" :readOnly="isReadonly"/>
          </a-form-model-item>
        </a-col>
        <!-- 比亚迪企业邮箱 -->
        <a-col :md="12" :sm="24">
          <a-form-model-item label="比亚迪企业邮箱">
            <a-input v-model="formData.basic.email" readOnly/>
          </a-form-model-item>
        </a-col>
        <!-- 组织架构部门 -->
        <a-col :md="24" :sm="24">
          <a-form-model-item label="组织架构部门【事业部（群）>>中心（部）>> 部门 >> 科室>>组】" prop="orgName" class="orgInput">
            <a-input v-model="formData.orgName" readOnly
              placeholder="请点击右侧按钮对应选择所属部门组织（若选项缺失，可选择手动输入，准确填写“组织名称”录入）">
              <div slot="addonAfter" v-if="!isReadonly">
                <a-button type="primary" shape="round" icon="double-right" @click="showOrganizeInfo"/>
              </div>
            </a-input>
          </a-form-model-item>
        </a-col>
        <!-- 对应岗位名称 -->
        <a-col :md="24" :sm="24">
          <a-form-model-item label="对应岗位名称"  prop="postTitle">
            <a-input v-model="formData.postTitle" :maxLength="100" placeholder="请输入所属岗位的全称" :readOnly="isReadonly"/>
          </a-form-model-item>
        </a-col>
        <!-- 对应岗位职责描述 -->
        <a-col :md="24" :sm="24">
          <a-form-model-item label="对应岗位职责描述"  prop="postDetail">
            <a-textarea
              :readOnly="isReadonly"
              :maxLength="500"
              v-model="formData.postDetail"
              placeholder="请详细描述岗位对应职责，在OTA升级流程中“流程阶段”对应工作事项；"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-model-item>
        </a-col>
        <!-- 请选择您在对应在流程审核中所属的审核角色 [多选] -->
        <a-col :md="24" :sm="24">
          <a-form-model-item>
            <span slot="label">
              <span class="requiredStar">*</span>
              请选择您在对应在流程审核中所属的审核角色 [多选]
            </span>
            <div class="whiteBox">
              <a-form-model-item prop="selectedRoles" style="">
                <a-checkbox-group
                  v-model="formData.selectedRoles"
                  v-decorator="['checkbox-group']" 
                  style="width: 100%;"
                  :disabled="isReadonly"
                  @change="changeRoles"
                >
                    <span v-for="role in auditRolesList" :key="role.id" style="margin-right:10px">
                      <a-checkbox :value="role.id">{{role.name}}</a-checkbox>
                    </span>
                    <a-checkbox value="other" class="otherBoxInput">
                      其他
                      <a-form-model-item prop="otherRole" style="width:300px;position: absolute;top:-8px;left:60px">
                        <a-input style="width:150px" :readOnly="isReadonly" v-model="formData.otherRole" :maxLength="50" type="text" placeholder="请输入其他角色"/>
                      </a-form-model-item>
                    </a-checkbox>
                </a-checkbox-group>
              </a-form-model-item>
            </div>
          </a-form-model-item>
        </a-col>
        <!-- 请输入办公电脑对应IP地址 -->
        <a-col :md="24" :sm="24">
          <a-form-model-item label="请输入办公电脑对应IP地址" prop="ip">
            <a-textarea
              :maxLength="100"
              :readOnly="isReadonly"
              v-model="formData.ip" placeholder="“网络”>>“属性”>>“IPV4地址”若不填写IP地址，请详细说明账号不绑定IP地址的原因..."
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <OrganizeInfo ref="OrganizeInfo" @saveOrgInfo="saveOrgInfo" :orgId="formData.orgId" :orgName="formData.orgName"/>
  </div>
</template>

<script>
import OrganizeInfo from '@/views/user/components/OrganizeInfo.vue'
import { checkPhone } from '@/utils/validate'
import lodash from 'lodash'

export default {
  components:{
    OrganizeInfo
  },
  props:{
    baseInfo:{
      type: Object,
      default() {
        return {}
      }
    },
    isReadonly:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return {
      formData:{
        basic:{
        },
        orgName:undefined,
        orgTree:{},
        auditRoles:[],
        selectedRoles:[],
      },
      // 审批用户列表
      auditRolesList:[],
      rules:{
        'basic.account': [{ required: true, message: this.$t('pleaseInput') }],
        'basic.name': [{ required: true }],
        // 'basic.email': [{ required: true, message: this.$t('请完善OA中邮箱信息') }],
        'basic.phone': [{ required: true, validator:checkPhone }],
        orgName:[{ required: true, message: this.$t('pleaseSelect') }],
        postTitle: [{ required: true, message: this.$t('pleaseInput') }],
        postDetail: [{ required: true, message: this.$t('pleaseInput') }],
        selectedRoles: [{ required: true, message: this.$t('pleaseSelect') }],
        otherRole:[{ required: true, message: this.$t('pleaseInput'), validator: (rule, value, callback) => {
            if (!value && this.formData.selectedRoles.includes('other')) {
              callback(new Error(this.$t('pleaseInput')));
            } else {
              callback();
            }
        } }],
        ip: [{ required: true, message: this.$t('pleaseInput') }],
      },
    }
  },
  watch:{
    baseInfo:{
      handler(value){
        if(value){
          this.formData=lodash.cloneDeep(value)
        }
      },
      deep:true,
      immediate:true
    }
  },
  mounted(){
    this.getAuditRoles()
  },
  methods:{
    changeRoles(data){
      this.$refs.validateForm.validateField('otherRole')
    },
    getAuditRoles(){
      this.$api.getAuditRoles({auditor:1}).then(res=>{
        this.auditRolesList=res.data
      })
    },
    showOrganizeInfo(){
      this.$refs.OrganizeInfo.show()
    },
    saveOrgInfo(orgId,orgName){
      this.formData.orgId=orgId
      this.$set(this.formData,'orgName',orgName)
      this.$refs.validateForm.validateField('orgName')
    },
    getFormData(){
      return new Promise((resolve, reject) => {
        this.$refs.validateForm.validate((valid) => {
          if (valid) {
            const arr =[]
            this.formData.selectedRoles.forEach((roleId)=>{
              this.auditRolesList.forEach((list)=>{
                if(roleId==list.id){
                  arr.push({
                    roleName:list.name,
                    roleId:list.id
                  })
                }
              })
            })
            this.formData.auditRoles=arr
            if(this.formData.selectedRoles.includes('other')){
              this.formData.auditRoles.push({
                roleName:this.formData.otherRole
              })
            }
            resolve(this.formData);
            // this.$emit('sendBaseInfo',this.formData)
            // this.$emit('validateErr',true)
          }else{
            reject();
            // this.$emit('nextButtonType',false)
            // this.$emit('validateErr',false)
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.whiteBox{
  width: 100%;
  border-radius: 4px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 1);
  border: 2px solid rgba(228, 228, 228, 1);
}
.orgInput ::v-deep .ant-input{
  height: 80px;
}
// /deep/.ant-form-item {
//   label {
//     font-size: 1.4rem;
//     color: #fff;
//   }
// }
/deep/.ant-form-explain {
  position: absolute;
  font-size: 1rem;
}
/deep/ .ant-form-item label{
 color:#000
}
.otherBoxInput .ant-input{
  border:none;
  border-bottom: 1px solid #000;
  border-radius: 0;
}
</style>